<template>
  <div>
    <!-- 主要内容输入框和搜索重置按钮 -->
    <i-search ref="iSearch" :model="formData" @search="fetch" @reset="reset">
      <el-form-item label="商品名称" prop="goodName">
        <el-input v-model="formData.goodName"></el-input>
      </el-form-item>
      <el-form-item label="商品编号" prop="goodId">
        <el-input v-model="formData.goodId"></el-input>
      </el-form-item>
    </i-search>

    <!-- 表格区域 -->
    <i-table
      :toolbar="toolbar"
      :tableData="tableData"
      :pageInfo="pageInfo"
      :selectionShow="true"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(item,index) in columnList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      ></el-table-column>
    </i-table>
    <!-- 新增热门位商品对话框 -->
    <i-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      @dialog-before-close="dialogBeforeClose"
      @dialog-cancel="dialogCancel"
      @dialog-confirm="dialogConfirm"
    >
      <el-form
        :model="dialogFormData"
        ref="formRef"
        :rules="formRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品编号" prop="goodId">
              <el-input v-model="dialogFormData.goodId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button
              type="primary"
              style="margin-top:6px;margin-left:10px"
              @click="goodSelected"
            >选择</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="热门位排序" prop="sortNumber">
              <el-input v-model="dialogFormData.sortNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </i-dialog>

    <!-- 热门位商品选择区域 -->
    <el-dialog title="在售商品选择" :visible.sync="hotGoodsdialogVisible" width="70%">
      <i-search ref="iSearch" :model="hotformData" @search="hotfetch" @reset="hotreset">
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="hotformData.goodName"></el-input>
        </el-form-item>
        <el-form-item label="商品编号" prop="goodId">
          <el-input v-model="hotformData.goodId"></el-input>
        </el-form-item>
      </i-search>
      <i-table
        :tableData="hotSelecttableData"
        :pageInfo="hotSelectpageInfo"
        :selectionShow="true"
        @handleCurrentChange="hothandleCurrentChange"
        @handleSizeChange="hothandleSizeChange"
        @selection-change="hothandleSelectionChange"
      >
        <el-table-column
          v-for="(item,index) in hotSelectcolumnList"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          align="center"
        ></el-table-column>
      </i-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hotGoodsdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hotGoodSubmit">提交</el-button>
      </span>
    </el-dialog>
<!-- 修改热门位商品会话框 -->
    <i-dialog
      v-model="editdialogVisible"
      :title="editdialogTitle"
      @dialog-before-close="editdialogBeforeClose"
      @dialog-cancel="editdialogCancel"
      @dialog-confirm="editdialogConfirm"
    >
      <el-form
        :model="editdialogFormData"
        ref="editformRef"
        :rules="formRules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品编号" prop="goodId">
              <el-input v-model="editdialogFormData.goodId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- @click="editgoodSelected" -->
            <el-button
              type="primary"
              style="margin-top:6px;margin-left:10px"
              @click="goodSelected"
              
            >选择</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="热门位排序" prop="sortNumber">
              <el-input v-model="editdialogFormData.sortNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </i-dialog>

    <!-- 热门商品数量设置 -->
    <el-dialog
  title="展示数量"
  :visible.sync="hotCommNumberdialogVisible"
  width="30%"
  >
  <el-form :inline="true" :model="hotCommNumber" class="demo-form-inline">
  <el-form-item label="热门商品展示数量">
    <el-input v-model="hotCommNumber.dictoryValue"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="hotCommNumberdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editNumber">确 定</el-button>
  </span>
</el-dialog>


  </div>
</template>

<script>
// 注意首两个字母要大写，这样才会被识别出来所调用的子组件
import ISearch from "../../components/common/i-search.vue";
import ITable from "../../components/common/i-table.vue";
import IDialog from "../../components/common/i-dialog.vue";
import req from "@/api/hot-comm-manage.js";
export default {
  name: "hot-comm-manage",
  data() {
    return {
      i:0,
      // 搜索框数据对象
      formData: {
        goodName:'',
        goodId:''
      },
      // 热门位搜索框
      hotformData:{
        goodName:'',
        goodId:''
      },
      // 新增按钮会话框数据对象
      dialogFormData: {
        goodId:'',
        sortNumber:''
      },
      // 热门位商品选择数据对象
      hotSelecttableData:{},
      // 修改热门位商品数据对象
      editdialogFormData:{},
      // 热门商品数量
      hotCommNumber:{},
      // 设置新增弹出框的默认状态为隐藏
      dialogVisible: false,
      // 设置热门位商品选择对话框默认为隐藏
      hotGoodsdialogVisible: false,
      // 设置修改热门位商品会话框默认隐藏
      editdialogVisible:false,
      // 热门商品数量设置
      hotCommNumberdialogVisible: false,
      // 存储热门位信息的id
      multipId: [],
// 存储表格信息id
tipId: [],
      // 新增按钮的弹出框标题提示
      dialogTitle: "新增热门位商品",
      // 修改按钮的弹出框标题提示
      editdialogTitle:"修改热门位商品",
      // 分页数据
      pageInfo: {
        pageIndex: 1,
        pageSize: 5,
        total: 0
      },
      // 热门位商品选择分页数据
      hotSelectpageInfo: {
        pageIndex: 1,
        pageSize: 5,
        total: 0
      },
      // 表格区域多个按钮数据设置
      toolbar: [
        {
          btnName: "新增",
          type: "primary",
          // 设置按钮的触发事件
          func: () => {
            this.dialogVisible = true;
          }
        },
        {
          btnName: "修改",
          type: "primary",
          func: () => {
            console.log(this.tipId)
            
            if (this.tipId.length === 1) {
              this.editdialogVisible = true;
              req("getHotGood", {
                hotGoodId: this.tipId[0]
              }).then(data => {
                console.log(data)
                this.editdialogFormData = data.data;
              });
            }
          }
        },
        {
          btnName: "删除",
          type: "primary",
          func:async () => {
            if(this.tipId.length!==0){
              const confirmResult =await this.$confirm("此操作将永久删除所选商品, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).catch(err=>err);
            if (confirmResult !== 'confirm') {
        this.$message('已取消删除')
        this.fetch();
      } else{
        req("deleteHotGoods", {
        hotGoodId:this.tipId.join(',')
      }).then(data=>{
        console.log(data)
        if(data.code!==0){
          this.$message.error(data.msg)
          this.fetch();
        }
        this.$message.success(data.msg)
        this.fetch()
      })
      }
            }
        
          }
        },
        {
          btnName: "展示数量设置",
          type: "primary",
          func: () => {
            this.hotCommNumberdialogVisible=true
            this.getHotGoodNumber()
          }
        }
      ],
      // 表格表头数据
      columnList: [
        { label: "排序", prop: "sortNumber" },
        { label: "商品编号", prop: "goodId" },
        { label: "商品名称", prop: "goodName" },
        { label: "商品价格", prop: "salePrice" },
        { label: "商品介绍", prop: "goodDetail" }
      ],
      // 热门位商品在售商品选择表格区域表头标题
      hotSelectcolumnList: [
        { label: "商品编号", prop: "goodId" },
        { label: "商品名称", prop: "goodName" },
        { label: "一级分类", prop: "firstClass" },
        { label: "二级分类", prop: "secondClass" },
      ],
      // 表格内容
      tableData: [],
      // 热门位商品选择表格内容
      hotSelecttableData: [],
      // 表单验证规则
      formRules: {
        goodId: [{ required: true, message: "请输入商品编号", trigger: "change" },],
        sortNumber: [{ required: true, message: "请输入热门位序号", trigger: "change" },],
      }
    };
  },
  // 挂在完毕之前加载数据
  mounted() {
    this.fetch();
    this.hotsearch()
    //  this.hotfetch();
  },
  methods: {
    fetch() {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = 5;
      this.search();
    },
    hotfetch() {
      this.hotSelectpageInfo.pageIndex = 1;
      this.hotSelectpageInfo.pageSize = 5;
      this.hotsearch();
    },
    
    search() {
      req("getTableData", {
        // access_token: JSON.parse(sessionStorage.getItem("userInfo"))
        //   .access_token,
        ...this.formData,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageIndex
      }).then(data => {
        console.log(data);
        this.pageInfo.total = data.data.total;
        this.pageInfo.pageSize = data.data.pageSize;
        this.pageInfo.pageIndex = data.data.pageNum;
        this.tableData = data.data.list;
      });
    },
    reset() {
     this.fetch();
    },
    hotreset() {
// this.i=this.i+1
// console.log(this.i)
   this.hotfetch()
    },
    // 每页多少条数据
    handleSizeChange(value) {
      this.pageInfo.pageSize = value;
      this.search();
    },
    // 当前页
    handleCurrentChange(value) {
      this.pageInfo.pageIndex = value;
      this.search();
    },
  // 选中的数据
    handleSelectionChange(rows) {
      console.log(rows)
      this.tipId =[];
      rows.forEach(item => {
        this.tipId.push(item.hotGoodId);
        
      });
    },
    // 热门位会话框每页多少条数据
    hothandleSizeChange(value) {
      this.hotSelectpageInfo.pageSize = value;
      this.hotsearch();
    },
    // 热门位会话框当前页
    hothandleCurrentChange(value) {
      this.hotSelectpageInfo.pageIndex = value;
      this.hotsearch();
    },
    hothandleSelectionChange(rows) {
      this.multipId =[];
      rows.forEach(item => {
        this.multipId.push(item.goodId);
        
      });
      
    },
    // 点击取消隐藏弹出的表单
    dialogCancel() {
      this.dialogVisible = false;
      this.$refs.formRef.resetFields();
      this.fetch();
      // this.fetch()
    },
    // 在表单关闭之前清空表单的数据
    dialogBeforeClose() {
      this.$refs.formRef.resetFields();
      this.dialogVisible = false;
      this.fetch();
    },
    // 点击取消隐藏弹出的表单
    editdialogCancel() {
      this.editdialogVisible = false;
      this.$refs.editformRef.resetFields();
      this.fetch();
    },
    // 在表单关闭之前清空表单的数据
    editdialogBeforeClose() {
      this.editdialogVisible = false;
      this.$refs.editformRef.resetFields();
      this.fetch();
    },

    // 点击表单确认按钮后事件
    dialogConfirm() {
      if(this.dialogFormData.sortNumber){
 this.dialogFormData.sortNumber=parseInt(this.dialogFormData.sortNumber)
      }else{
        console.log('0')
      }
      this.$refs.formRef.validate(async valid => {
        if (!valid) return;
         req("addHotGood", {
          // access_token: JSON.parse(sessionStorage.getItem("userInfo"))
          //   .access_token,
          ...this.dialogFormData
        }).then(data => {
          console.log(data)
          if (data.code === 0) {
             this.$message.success(data.msg);
            // 隐藏对话框
          this.dialogVisible = false;
          // 刷新页面
          this.fetch();
          }else {
            this.$message.error(data.msg);
            this.fetch();
          }
           
          
        });
      });
    },
    // 确认修改事件
    editdialogConfirm(){
 if(this.editdialogFormData.sortNumber){
 this.editdialogFormData.sortNumber=parseInt(this.editdialogFormData.sortNumber)
      }else{
        console.log('0')
      }
      this.$refs.editformRef.validate(async valid => {
        if (!valid) return;
         req("updateHotGood", {
          ...this.editdialogFormData
        }).then(data => {
          console.log(data)
          if (data.code === 0) {
             this.$message.success(data.msg);
            // 隐藏对话框
          this.editdialogVisible = false;
          // 刷新页面
          this.fetch();
          }
           else {
            this.$message.error(data.msg);
            this.fetch();
          }
          
        });
      });
    },
    // 热门位商品选择对话框
    goodSelected() {
      this.hotGoodsdialogVisible = true;
      this.hotfetch()
      
      // req("getTableData", {
      //   // access_token: JSON.parse(sessionStorage.getItem("userInfo"))
      //   //   .access_token,
      //   ...this.hotformData,
      //   pageSize: this.hotSelectpageInfo.pageSize,
      //   pageNum: this.hotSelectpageInfo.pageIndex
      // }).then(data => {
      //   // console.log(data);
      //   this.hotSelectpageInfo.total = data.data.total;
      //   this.hotSelectpageInfo.pageSize = data.data.pageSize;
      //   this.hotSelectpageInfo.pageIndex = data.data.pageNum;
      //   this.hotSelecttableData = data.data.list;
      // });
    },
    // 在售商品查询
    hotsearch() {
      req("hotgetTableData", {
        ...this.hotformData,
        // 每页的数据条数
        pageSize: this.hotSelectpageInfo.pageSize,
        // 页号
        pageNum: this.hotSelectpageInfo.pageIndex
      }).then(data => {
        console.log('在售',data);
        this.hotSelectpageInfo.total = data.data.total;
        this.hotSelectpageInfo.pageSize = data.data.pageSize;
        this.hotSelectpageInfo.pageIndex = data.data.pageNum;
        this.hotSelecttableData = data.data.list;
      });
    },
    hotGoodSubmit(){
      if(this.multipId.length!==1){
        this.$message.error('请选择单个热门位商品！')
      }else {
        this.hotGoodsdialogVisible=false
        this.dialogFormData.goodId=this.multipId[0]
        // console.log(this.multipId[0])
      }
    },
    // 热门位商品数量查询
    getHotGoodNumber(){
      req("getHotGoodNumber",{}).then(data => {
        console.log(data)
        this.hotCommNumber = data.data
      })
    },
    // 修改热门商品数量
    editNumber(){
      console.log(this.hotCommNumber.dictoryValue)
      console.log(this.hotCommNumber.version)
      req('updateHotGoodNumber',{
        dictoryValue:this.hotCommNumber.dictoryValue,
        version:this.hotCommNumber.version
      }).then(data=>{
        if(data.code!==0){
          return this.$message.error(data.msg)
        }
        this.$message.success(data.msg)
        this.hotCommNumberdialogVisible=false
      })
    }
  },
  // 子组件注册
  components: {
    ISearch,
    ITable,
    IDialog
  }
};
</script>

<style lang="scss" scoped>
.el-input{
  width: 218px;
}
</style>
